<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <link rel="stylesheet" href="/static/dist/lib/chosen/chosen.css">
    <link rel="stylesheet" href="/static/dist/lib/chosenicons/zui.chosenicons.css">
    <style type="text/css">
        #allmap {width: 100%;min-height: 555px;max-height: 555px;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <div class="row">
        <div class="col-md-12">数据地图展示</div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <form id="role-form-add" name="resourceForm" enctype="multipart/form-data" method="post" >
                <fieldset>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="input-control has-label-left-sm">
                                    <select class="chosen-select form-control" name="icon" id="chosenProvinces" placeholder="省份" data-value="icon-star"></select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-control has-label-left-lg">
                                    <select class="chosen-select form-control" name="icon" id="chosenCities" placeholder="市" data-value="icon-star"></select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-control has-label-left-lg">
                                    <select class="chosen-select form-control" name="icon" id="chosenDistricts" placeholder="区/县" data-value="icon-star"></select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="input-control has-label-left-lg">
                                    <button type="button" class="btn btn-primary" id="toilet_btn_gather">查 找</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </fieldset>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="allmap"></div>
        </div>
    </div>
    <input type="hidden" id="areaType"/>
    <input type="hidden" id="areaCode"/>
    <script src="/static/dist/lib/chosen/chosen.js"></script>
    <script src="/static/dist/lib/chosenicons/zui.chosenicons.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=QMnUQIPOicpmLhi4X7Cmxhpv7wwkfvbo&callback=initToiletMap"></script>
    <script type="text/javascript" src="http://lbsyun.baidu.com/jsdemo/data/points-sample-data.js"></script>
    <script type="application/javascript">
        var _m = null;

        function initToiletMap() {
            _m = new BMap.Map("allmap");
            // 创建地图实例
            var point = new BMap.Point(116.404, 39.915);
            // 创建点坐标
            _m.centerAndZoom(point, 15);
            // 允许鼠标滚轮缩放
            _m.enableScrollWheelZoom(true);
            _m.addEventListener("tilesloaded",function(){
                console.log("地图加载完毕");
            });
        }

        /**
         * 采集按钮
         */
        $('#toilet_btn_gather').on('click', function () {
            // gather
            // new $.zui.Messager('采集中……', {
            //     type: 'success',
            //     icon: 'check',//smile
            //     close: true,
            //     placement: 'center' // 定义显示位置
            // }).show();
            loadToilets();
        });

        /**
         * 加载卫生间数据
         */
        function loadToilets() {

            var areaType = $("#areaType").val(),areaCode = $("#areaCode").val();
            if(!areaCode || !areaType){
                new $.zui.Messager('请选择你要查询的地区', {
                    type: 'warning',
                    icon: 'meh',//smile
                    close: true,
                    placement: 'center' // 定义显示位置
                }).show();
                return;
            }
            if(areaType != 'district'){
                new $.zui.Messager('请选择你要查询的区县', {
                    type: 'warning',
                    icon: 'meh',//smile
                    close: true,
                    placement: 'center' // 定义显示位置
                }).show();
                return;
            }
            console.log(areaCode);// ,
            _m.clearOverlays();
            var loadingObj = (new $.zui.ModalTrigger({showHeader: false}));
            loadingObj.show();
            /**
             $.post('/admin/toilet/list', {
                "areaType": areaType,
                "areaCode": areaCode
            }, function(res) {
                if(res.status && res.code == 200){
                    console.log(res);
                    var _data = res.data;
                    var _ps = new Array();
                    var points = [];  // 添加海量点数据
                    for(var i in _data){
                        var _t = _data[i];
                        var point = new BMap.Point(_t.bmapLng, _t.bmapLat);
                        _ps.push(point);
                        points.push(point);
                        var marker = new BMap.Marker(point);
                        _m.addOverlay(marker);
                    }
                    _m.setViewport(_ps);
                    loadingObj.close();
                }
            });
             **/

            $.post('/admin/toilet/search', {
                "lng": 108.866498,
                "lat": 34.274359,
                "radius": 5000
            }, function(res) {
                if(res.status && res.code == 200){
                    console.log(res);
                    var _data = res.data;
                    var _ps = new Array();
                    var points = [];  // 添加海量点数据
                    for(var i in _data){
                        var _t = _data[i];
                        var point = new BMap.Point(_t.bmapLng, _t.bmapLat);
                        _ps.push(point);
                        points.push(point);
                        var marker = new BMap.Marker(point);
                        _m.addOverlay(marker);
                    }
                    _m.setViewport(_ps);
                    loadingObj.close();
                }
            });

            // console.log(data.data);
            // var points = [];  // 添加海量点数据
            // for (var i = 0; i < data.data.length; i++) {
            //     points.push(new BMap.Point(data.data[i][0], data.data[i][1]));
            // }
            // console.log(BMAP_POINT_SHAPE_STAR);
            // console.log(BMAP_POINT_SIZE_SMALL);
            // var options = {
            //     size: BMAP_POINT_SIZE_SMALL,
            //     shape: BMAP_POINT_SHAPE_STAR,
            //     color: '#d340c3'
            // }
            // var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
            // _m.addOverlay(pointCollection);  // 添加Overlay

        }





        $(function () {
            initChosen();
        });




        function initChosen() {
            /**
             * 初始化上级资源
             */
            loadProvinces();
        }



        /**
         * 获取省份信息
         */
        function loadProvinces() {
            $.get('/api/provinces', {}, function(res) {
                var html = "<option value=\"\"></option>";
                for(index in res){
                    if(res[index]){
                        html += "<option value='" + res[index].code + "'>" + res[index].name + "</option>";
                    }
                }
                $('#chosenProvinces').append(html);
                $('#chosenProvinces').chosen({
                    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 0, // 10 个以下的选择项则不显示检索框
                    compact_search: true,           // 启用紧凑的单项选择
                    search_contains: true         // 从任意位置开始检索
                });



                $('#chosenProvinces').on('change', function(evt, params){
                    $('#chosenCities').html('');
                    $('#chosenCities').trigger('chosen:updated');
                    $('#chosenDistricts').html('');
                    $('#chosenDistricts').trigger('chosen:updated');
                    //$('#cityCode').val(params.selected);
                    loadCities(params.selected);
                    $("#areaType").val('province');
                    $("#areaCode").val(params.selected);
                    //loadToilets('province',params.selected);
                });

            });
        }

        /**
         * 根据省份获取城市信息
         * @param provinceCode
         */
        function loadCities(provinceCode) {
            $.get('/api/cities/' + provinceCode, {}, function(res) {
                var html = "<option value=\"\"></option>";
                for(index in res){
                    if(res[index]){
                        html += "<option value='" + res[index].code + "'>" + res[index].name + "</option>";
                    }
                }
                $('#chosenCities').html(html);
                $('#chosenCities').trigger('chosen:updated');
                $('#chosenCities').chosen({
                    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 0, // 10 个以下的选择项则不显示检索框
                    compact_search: true,           // 启用紧凑的单项选择
                    search_contains: true         // 从任意位置开始检索
                });
                $('#chosenCities').on('change', function(evt, params){
                    $('#chosenDistricts').html('');
                    $('#chosenDistricts').trigger('chosen:updated');
                    loadDistricts(params.selected);
                    //loadToilets('city',params.selected);
                    $("#areaType").val('city');
                    $("#areaCode").val(params.selected);
                });
            });
        }

        /**
         * 根据城市获取县/区信息
         * @param cityCode
         */
        function loadDistricts(cityCode) {
            $.get('/api/districts/' + cityCode, {}, function(res) {
                var html = "<option value=\"\"></option>";
                for(index in res){
                    if(res[index]){
                        html += "<option value='" + res[index].code + "'>" + res[index].name + "</option>";
                    }
                }
                $('#chosenDistricts').html(html);
                $('#chosenDistricts').trigger('chosen:updated');
                $('#chosenDistricts').chosen({
                    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 0, // 10 个以下的选择项则不显示检索框
                    compact_search: true,           // 启用紧凑的单项选择
                    search_contains: true         // 从任意位置开始检索
                });
                $('#chosenDistricts').on('change', function(evt, params){
                    console.log(evt);
                    console.log(params);
                    //loadToilets('district',params.selected);
                    $("#areaType").val('district');
                    $("#areaCode").val(params.selected);
                });
            });
        }

    </script>

</div>
</body>
</html>